<template>
	<view>
		<view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
			<view class="iconfont icon-shanchu1" @click="goMyfile"></view>
			<view class="font-md">忘记密码</view>
		</view>
		<view class="p-5">
			<view class="font-big mb-5">密码登录</view>
			<input type="text" class="border-bottom mb-4 uni-input px-0" placeholder="请输入手机号/邮箱/账号"
				placeholder-class="text-light-muted" v-model="ufrom.username" @focus="focus('username')"
				@blur="blur('username')" :class="focusClass.username?'input-border-color':''" />
			<input type="password" class="border-bottom mb-4 uni-input px-0" placeholder="请输入密码"
				placeholder-class="text-light-muted" v-model="ufrom.password" @focus="focus('password')"
				@blur="blur('password')" :class="focusClass.password?'input-border-color':''" />
			<button class="py-1 w-100 d-flex a-center j-center main-bg-color  rounded font-md mb-4"
				hover-class="main-bg-hover-color" @click="submit">
				登录
			</button>
			<label class="checkbox d-flex a-center">
				<checkbox :checked="check" @click="check=!check" />
				<text class="font text-light-muted">已阅读并同意XXXXX协议</text>
			</label>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
    import {getLogin} from '../../api/index.js'
	import { useLoginStore } from '../../store/login'
	const store = useLoginStore()
	var ufrom = ref({
		username:'user2',
		password:'zcmcss'
	})
	var check = ref(false)
	var focusClass = ref({
		username: false,
		password: false
	})
	const focus = (key) => {
		focusClass.value[key] = true
	}
	const blur = (key) => {
		focusClass.value[key] = false
	}

	var rules = {
		username: [{
			message: '请输入正确的账号，账号长度为2-10之间',
			rule: /^[a-zA-Z0-9_-]{2,10}$/
		}],
		password: [{
			message: '请输入正确的密码，密码长度为4-20之间',
			rule: /^[a-zA-Z]([-_a-zA-Z0-9]{4,20})$/
		}]
	}
	//表单验证
	const validate = (key)=>{
		let check = true;
		rules[key].forEach(v=>{
			var obj = ufrom.value[key];
			if(!v.rule.test(obj)){
				uni.showToast({
					title:v.message,
					icon:'none'
				})
				check = false
				return;
			}
			
		})
		return check;
	}
	const goMyfile = ()=>{
		uni.switchTab({
			url:'/pages/myfile/myfile'
		})
	}
	//登录
	const submit = ()=>{
		if(!validate('username')){
			return;
		}
		if(!validate('password')){
			return;
		}
		if(check.value){
			//请求接口
			getLogin(ufrom.value.username,ufrom.value.password).then(res=>{
				console.log('11111111111',res);
				if(res.msg=='ok'){
					store.getUserInfo(res.data)
					uni.switchTab({
						url:'/pages/myfile/myfile'
					})
				}
			})
			
		}else {
			uni.showToast({
				title:'请同意相关协议规定',
				icon:'none'
			})
			return;
		}
	}
</script>

<style scoped>
	.wx-login-wrapper {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}

	.wx-login {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx 0 0 0;
	}

	.avatar-wrapper {
		width: 90rpx;
		height: 90rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		margin: 0 0 0 -24rpx;

	}

	.text-light-muted {
		color: #ccc !important;
	}
</style>